feat(badge): port pf-v5-badge to pf-v6-badge element#3138
Open
zeroedin wants to merge 9 commits into
Open
Conversation
Port pf-v5-badge to pf-v6-badge with v6 design tokens, CSS, and API parity with PatternFly v6 React Badge component. Changes from v5: - Updated CSS custom properties to --pf-v6-c-badge--* namespace - Added border overlay via ::after pseudo-element (new in v6) - Added disabled state with pointer-events: none - Switched to CSS logical properties (padding-inline-start/end) - Simplified render: no wrapper span, slot for default content - Added `@cssprop` JSDoc for all public CSS custom properties - Added `@summary` and `@slot` JSDoc annotations - Exported BadgeState type union Demos match patternfly.org: read, unread, disabled, plus WC-specific threshold demo. Tests cover: instantiation, number/threshold display, state colors, disabled styling, accessibility tree, slot content. Closes #2982 Assisted-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove reflect from number and threshold properties (no CSS selectors) - Fix threshold comparison: use <= instead of < so number=threshold shows + - Simplify render return type to TemplateResult - Add cem generate output path to config Assisted-By: Claude Opus 4.6 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 54dd0e8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
✅ Commitlint tests passed!More Info{
"valid": true,
"errors": [],
"warnings": [],
"input": "feat(badge): port pf-v5-badge to pf-v6-badge element"
} |
Contributor
✅ Deploy Preview for patternfly-elements ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
Contributor
bennypowers
requested changes
May 10, 2026
Member
bennypowers
left a comment
bennypowers
left a comment
There was a problem hiding this comment.
see comments on the other 2 prs
bennypowers
requested changes
May 12, 2026
Member
bennypowers
left a comment
bennypowers
left a comment
There was a problem hiding this comment.
Should remove all existing pf-v5-badge references
Contributor
zeroedin
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
<pf-v5-badges><pf-v5-badges>to<pf-v6-badge>web component for PatternFly v6thresholdattribute to cap displayed value (e.g., "999+")numberattribute for programmatic value settingdisabledattribute dims the badgeCloses #2982
Depends on #3130
Intentional divergences from React
childrenprop for the numeric valuenumberandthresholdattributes are not reflected (no CSS selectors use them)disabledusesaria-disabledvia ElementInternals rather than a host attributeTest plan
npm run testpasseslocalhost:8000with?rendering=chromelessAssisted-By: Claude noreply@anthropic.com